<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>反地址解析</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        html{
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        body{
            height: 100%;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            margin-top:10px;
            overflow:hidden;
        }
        #container {
            height: 100%;
            width: 100%;
        }
        input#address{
            width:300px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>
    <script>
        var geocoder,map, markers = null;
        var searchMarker;
        var marker;
        var init = function() {
            var center = new qq.maps.LatLng(39.916527,116.397128);
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 13
            });
            geocoder = new qq.maps.Geocoder({
                complete : function(result){
                    console.log(result);
                    parent.address(result);
                    map.setCenter(result.detail.location);
                    searchMarker = new qq.maps.Marker({
                        map:map,
                        position: result.detail.location
                    });
                }
            });
            markers = new qq.maps.Geocoder({
                complete : function(result){
                    console.log(result);
                    parent.address(result);
                    map.setCenter(result.detail.location);
                }
            });
            //获取城市列表接口设置中心点
            citylocation = new qq.maps.CityService({
                complete : function(result){
                    map.setCenter(result.detail.latLng);
                }
            });
            //调用searchLocalCity();方法    根据用户IP查询城市信息。
            citylocation.searchLocalCity();
            qq.maps.event.addListener(map, "click", function (e) {
                searchMarker ? searchMarker.setMap(null) : null;
                var latLng = new qq.maps.LatLng(e.latLng.getLat().toFixed(6), e.latLng.getLng().toFixed(6));
//                qq.maps.event.addListener(map, 'click', function(event) {
//
//                });
                marker ? marker.setMap(null) : null;
                marker=new qq.maps.Marker({
                    position:latLng,
                    map:map
                });
                //调用获取位置方法
                markers.getAddress(latLng);
            });
        }
        function codeAddress() {
            var address = $('#address').val();
            //通过getLocation();方法获取位置信息值
            geocoder.getLocation(address);
            marker ? marker.setMap(null) : null;
        }
    </script>
</head>
<body onload="init()">
<div style="margin-bottom: 10px;">
    <input id="address" type="textbox" value="中国,长沙,岳麓区,梅溪湖创新中心">
    <button onclick="codeAddress()">搜索</button>
</div>
<div id="container"></div>
</body>
</html>
